<template>
  <div class="main">
    <div class="head">拿手好菜</div>
    <div class="dishesInfo" v-for="(dishes,index) in dishess" >
        <img :src="getImgsrc(dishes.img)"/>
      <span>{{dishes.name}}</span>
    </div>
  </div>
</template>

<script>
  import api from "../../../../axios/api";

    export default {
        name: "picture",
      data(){
        return {
          dishess:[]
        }
      },
      methods:{
        getImgsrc: function (imgsrc) {
          return "../../../../../static/images/dishes/" + imgsrc;
        },
        setImgAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/dishesImg", null, "post")
            .then(res => {
              // console.log(res)
              this.dishess = res;
              console.log(res)
              // console.log(this.picture.name)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        }
      },
      created() {
        this.setImgAxios();
      }
    }
</script>

<style scoped lang="stylus">
  .main
    margin-top 40px
    margin-bottom 20px
    width 1000px
    height 700px

    .dishesInfo
      height 153px
      width 153px
      margin 50px 0 0 39px
      float left

      img
        height 150px
        width 152px
      span
       display block
       text-align center
    .head
      font-size 30px
      text-align:center
</style>
